<template>
    <div>       
        <new-todo @addNewTodo="addNewTodo" />    
        <todo-item 
            v-for="todo in filteredTodos" 
            v-bind:todo="todo" 
            :key='todo.id'
            @remove="showConfirmDlg"
            @editTodo="editTodo"
            @cancelEditing="cancelEditing"
            @doneEditing="doneEditing"
            @statusChange="replaceTodo" />

        <div class="tip">* 勾选标注 "已完成"，双击未完成事项进行编辑，点击 × 删除</div>
        
        <div class="check-all-row">
            <div v-if="totalTodos>0">
                <input  type="checkbox" @change="checkAll" :checked="completedTodos==totalTodos">
                将所有标记为已完成
            </div>
            <span>
                已完成：{{completedTodos}}/{{totalTodos}}
            </span>
        </div>
        <hr>
        <div class="filter-row">
            <div class="filter">
                <button :class="{active:filter=='all'}" @click="filter='all'">全部</button>
                <button :class="{active:filter=='completed'}" @click="filter='completed'">已完成</button>
                <button :class="{active:filter=='active'}" @click="filter='active'">未完成</button>
                过滤
                <input type="text" placeholder="输入过滤字符串 ESC-清空" v-model="titleFilter" @keyup.esc="titleFilter=''">
            </div>
            <span v-if="completedTodos>0" class="clear-all" @click="showConfirmDlg('delete completed')">清除所有已完成</span>
        </div>
        <confirm-dlg :title="confirmTitle" :msg="confirmMsg" :show="showConfirm" @confirmResult="getConfirmResult"/>
    </div>
    
</template>

<script>
import TodoItem from './TodoItem'
import NewTodo from './NewTodo'
import ConfirmDlg from './ConfirmDlg'

export default {
    name: 'todo-list',
    components: {
        TodoItem,
        NewTodo,
        ConfirmDlg
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    },
    watch: {
        result: function(newValue,oldValue){
            if(newValue=='OK'){
                if(this.op=='delete one'){
                    this.removeTodo(this.deletingTodoId)
                }
                if(this.op=='delete completed'){
                    this.removeCompleted()
                }
            }
            this.showConfirm = false
            this.result = ''
        },
    },
    data(){
        return {
            newId: 6,
            oldTitle: '',
            confirmTitle: '',
            confirmMsg: '跟同学去看一场电影',
            showConfirm: false,
            deletingTodoId: 0,
            op: '',
            result: false,
            filter: 'all',
            titleFilter: '',
            todos: [
                {
                    id: 1,
                    title: '周末好好学习 Vue.js',
                    editing: false,
                    completed: false
                },
                {
                    id: 2,
                    title: '跟同学去看一场电影',
                    editing: false,
                    completed: true
                },
                {
                    id: 3,
                    title: '去昆明买衣服',
                    editing: false,
                    completed: false
                },
                {
                    id: 4,
                    title: '约朋友去打一场乒乓球',
                    editing: false,
                    completed: true
                },
                {
                    id: 5,
                    title: '去同学的家乡玩',
                    editing: false,
                    completed: false
                }
            ]
        }
    },
    computed: {
        completedTodos: function(){
            const t = this.titleFilter.trim()
            return this.todos.filter(todo=>todo.completed && todo.title.indexOf(t)!==-1).length
        },
        totalTodos(){
            const t = this.titleFilter.trim()
            return this.todos.filter(todo=> todo.title.indexOf(t)!==-1).length
        },
        filteredTodos(){
            const t = this.titleFilter.trim()
            switch(this.filter){
                case 'completed':
                    return this.todos.filter(todo=>todo.completed && todo.title.indexOf(t)!==-1)
                    break;
                case 'active':
                    return this.todos.filter(todo=>!todo.completed && todo.title.indexOf(t)!==-1)
                    break;
                default:
                    return this.todos.filter(todo=> todo.title.indexOf(t)!==-1)
            }
        }
    },
    methods: {
        getConfirmResult(result){
            this.result = result
        },
        addNewTodo(newTodo){
            this.todos.push({
                id: this.newId,
                title: newTodo,
                editing: false,
                completed: false
            });
            this.newId++
        },
        removeTodo(id){
            const index = this.todos.findIndex(todo=>todo.id==id)
            this.todos.splice(index,1)
        },
        removeCompleted(){
            const t = this.titleFilter.trim()
            this.todos = this.todos.filter(todo=>!todo.completed || todo.title.indexOf(t)==-1)
        },
        editTodo(todo_copy){
            let todo = this.getTodo(todo_copy.id)
            if(todo.completed){
                return
            }
            this.oldTitle = todo.title
            todo.editing = true
        },
        doneEditing(todo){
            this.replaceTodo(todo)
            if(todo.title.trim()==""){
                todo.title = this.oldTitle
            }
            this.oldTitle = todo.title
            todo.editing = false
        },
        cancelEditing(todo_copy){
            let todo = this.getTodo(todo_copy.id)
            todo.title = this.oldTitle
            todo.editing = false
        },
        showConfirmDlg(forwhat,data){
            this.op = forwhat
            if(forwhat=='delete one'){
                this.deletingTodoId = data.id
                this.confirmTitle = "您真的要删除此纪录吗？"
                this.confirmMsg = data.title
                this.showConfirm = true
            }
            else if(forwhat=='delete completed'){
                this.confirmTitle = "您真的要删除所有已完成纪录吗？"
                this.confirmMsg = ''
                this.showConfirm = true
            }

        },
        checkAll(){
            const t = this.titleFilter.trim()
            this.todos.filter(todo=> todo.title.indexOf(t)!==-1).forEach(todo=>todo.completed=event.target.checked)
        },
        getTodo(id){
            return this.todos.find(todo=>todo.id==id)
        },
        replaceTodo(todo){
            const index = this.todos.findIndex(t=>t.id==todo.id)
            this.todos.splice(index,1,todo)
        }
        
    }
}
</script>

<style scoped>


.tip{
    font-size: 14px;
    color: gray;
    margin-top: 20px;
}
.check-all-row{
    margin-top: 50px;
    display: flex;
    justify-content: space-between;

}
.filter-row{
    display: flex;
    justify-content: space-between;
}
.clear-all{
    cursor: pointer;
}
.clear-all:hover{
    color: red;
}
.filter input{
    font-size: 16px;
    padding: 3px;
}
button.active{
    background-color: cadetblue;
    color: white;
}
input[type='checkbox']{
    cursor: pointer;
}
.edit-tip{
    font-size: 14px;
    margin-top: 5px;
    margin-left: 22px;

}
</style>


